<template>
  <div class='edit-company-dialog-container'
       v-if="visible">
    <el-dialog :visible.sync="visible"
               width="65%"
               @close="dialogClose"
               :title="dialogStatus==='update'?'编辑公司':dialogStatus==='create'?'新增公司':'公司详情'">
      <el-form :model="
               editCompanyData"
               ref="editCompany"
               status-icon
               :rules="rules"
               label-width="130px"
               class="edit-company-form"
               :disabled="dialogStatus==='detail'">
        <el-row>
          <el-col :span="16">
            <el-form-item label="单位类型"
                          prop="company_type">
              <el-select v-model="editCompanyData.company_type">
                <el-option v-for="(item, index) in companyTypeList"
                           :key="index"
                           :label="item.name"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="单位名称"
                          prop="company_name">
              <el-input v-model="editCompanyData.company_name">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="法人姓名"
                          prop="contact_name">
              <el-input v-model="editCompanyData.contact_name">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row>
          <el-col :span="11">
            <el-form-item label="单位类型"
                          prop="company_type">
              <el-select v-model="editCompanyData.company_type">
                <el-option label="选择单位类型"
                           value="0">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11"
                  :offset="1">
            <el-form-item label="单位名称"
                          prop="company_name">
              <el-input v-model="editCompanyData.company_name"
                        placeholder="请输入单位名称">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="单位简称"
                          prop="company_nickname">
              <el-input v-model="editCompanyData.company_nickname"
                        placeholder="请输入单位简称">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11"
                  :offset="1">
            <el-form-item label="二级域名前缀"
                          prop="url_prefix">
              <label for="">http://</label>
              <el-input class="col-6"
                        v-model="editCompanyData.url_prefix"
                        placeholder="请输入二级域名前缀">
              </el-input>
              <label for="">.ihibuilding.cn</label>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="负责人名称"
                          prop="admin">
              <el-input v-model="editCompanyData.admin"
                        placeholder="请输入负责人名称">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11"
                  :offset="1">
            <el-form-item label="负责人电话"
                          prop="admin_phone">
              <el-input v-model="editCompanyData.admin_phone"
                        placeholder="请输入负责人电话">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="单位等级"
                          prop="company_level">
              <el-select v-model="editCompanyData.company_level">
                <el-option label="请选择单位等级"
                           value="0">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11"
                  :offset="1">
            <el-form-item label="选择上属单位"
                          prop="upper_company">
              <el-select v-model="editCompanyData.upper_company">
                <el-option label="请选择上属单位"
                           value="0">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="单位logo"
                          prop="company_logo">
              <el-upload class="company-logo-upload"
                         action="https://jsonplaceholder.typicode.com/posts/"
                         :show-file-list="false"
                         :on-success="handleCompanylogoSuccess"
                         :before-upload="beforeCompanylogoUpload">
                <img :src="editCompanyData.companyLogo"
                     v-if="editCompanyData.companyLogo"
                     class="logo">
                <i v-else
                   class="el-icon-plus logo-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="11"
                  :offset="1">
            <el-form-item label="单位地址"
                          prop="address">
              <el-input v-model="editCompanyData.address"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="详细地址"
                          prop="address_detail">
              <el-input v-model="editCompanyData.address_detail"
                        placeholder="请输入详细地址">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11"
                  :offset="1">
            <el-form-item label="具体位置"
                          prop="company_latitude">
              <el-input v-model="editCompanyData.company_latitude"
                        :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="单位邮箱"
                          prop="company_email">
              <el-input v-model="editCompanyData.company_email"
                        placeholder="请输入单位邮箱">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11"
                  :offset="1">
            <el-form-item label="法人姓名"
                          prop="legal_name">
              <el-input v-model="editCompanyData.legal_name"
                        placeholder="请输入法人姓名">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="证件类型"
                          prop="credit_type">
              <el-select v-model="editCompanyData.credit_type">
                <el-option label="请选择证件类型"
                           value="0">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11"
                  :offset="1">
            <el-form-item label="证件号码"
                          prop="credit_num">
              <el-input v-model="editCompanyData.credit_num"
                        placeholder="请输入证件号码">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="统一社会信用代码"
                          prop="code">
              <el-input v-model="editCompanyData.code"
                        placeholder="请输入统一社会信用代码">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11"
                  :offset="1">

          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="网站封面图"
                          prop="banner">
              <el-upload class="company-logo-upload"
                         action="https://jsonplaceholder.typicode.com/posts/"
                         :show-file-list="false"
                         :on-success="handleCompanylogoSuccess"
                         :before-upload="beforeCompanylogoUpload">
                <img :src="editCompanyData.banner"
                     v-if="editCompanyData.banner"
                     class="logo">
                <i v-else
                   class="el-icon-plus logo-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="11"
                  :offset="1">
            <el-form-item label="营业执照电子版"
                          prop="bussiness_img">
              <el-upload class="company-logo-upload"
                         action="https://jsonplaceholder.typicode.com/posts/"
                         :show-file-list="false"
                         :on-success="handleCompanylogoSuccess"
                         :before-upload="beforeCompanylogoUpload">
                <img :src="editCompanyData.bussiness_img"
                     v-if="editCompanyData.bussiness_img"
                     class="logo">
                <i v-else
                   class="el-icon-plus logo-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row> -->
      </el-form>
      <div slot="footer"
           class="dialog-footer footer-btn">
        <el-button v-if="dialogStatus!=='detail'"
                   @click="saveData()"
                   type="primary">保 存</el-button>
        <el-button @click="cancelDialog()">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { standardCodeApi } from '@/services/StandardCode'
import { companyListApi } from '@/services/CompanySetting'
export default {
  data () {
    return {
      editCompanyData: {},
      visible: false,
      rules: {
        company_name: [
          { required: true, message: '请输入公司名', trigger: 'blur' }
        ],
        company_type: [
          { required: true, message: '请选择公司类型', trigger: 'change' }
        ],
        contact_name: [
          { required: true, message: '请输入法人姓名', trigger: 'blur' }
        ]
      },
      companyTypeList: []
    }
  },
  methods: {
    handleCompanylogoSuccess () {

    },
    beforeCompanylogoUpload () {

    },
    dialogClose () {
      this.$emit('update:dialogVisible', false)
    },
    saveData () {
      this.$refs.editCompany.validate((valid) => {
        if (valid) {
          if (this.dialogStatus === 'create') {
            this.createCompany()
          } else if (this.dialogStatus === 'update') {
            this.updateCompany()
          }
        }
      })
    },
    updateCompany () {
      this.editCompanyData.id = this.editCompanyData.company_rela_id
      companyListApi.updateCompany({
        data: this.editCompanyData
      }).then(res => {
        if (res.code === 0) {
          this.$message.success('修改单位成功')
          this.dialogClose()
          this.$emit('callback', 'success')
        }
      }, err => {
        console.log(err)
      })
    },
    createCompany () {
      companyListApi.createCompany({
        data: this.editCompanyData
      }).then(res => {
        if (res.code === 0) {
          this.$message.success('新增单位成功')
          this.dialogClose()
          this.$emit('callback', 'success')
        }
      }, err => {
        console.log(err)
      })
    },
    cancelDialog () {
      this.dialogClose()
    },
    // 获取单位类型标准吗
    getCompanyTypeList () {
      standardCodeApi.getStandardCodeData({
        data: {
          code_type: 'companyType'
        }
      }).then(res => {
        console.log(res, 'get car status')
        if (res.code === 0 && res.data.list) {
          this.companyTypeList = res.data.list
          window.localStorage.setItem('companyType', JSON.stringify(this.companyTypeList))
        }
      }, err => {
        console.log(err)
      })
    }
  },
  props: {
    dialogVisible: Boolean,
    dialogStatus: String,
    dialogForm: Object,
    callback: Function
  },
  watch: {
    dialogVisible (newval, oldval) {
      this.visible = newval
    },
    dialogForm: {
      handler (newval, oldval) {
        this.editCompanyData = JSON.parse(JSON.stringify(newval))
      },
      deep: true
    }
  },
  async created () {
    let local = window.localStorage.getItem('companyType')
    if (local) {
      this.companyTypeList = JSON.parse(local)
    } else {
      // if (window.sessionStorage.getItem('access_token')) {
      if (window.localStorage.getItem('access_token')) {
        await this.getCompanyTypeList()
      }
    }
    this.editCompanyData = this.dialogForm
    this.visible = this.dialogVisible
    // sconsole.log(this.visible, this.editCompanyData, 'edit company dialog')
  },
  mounted () {
  }
}
</script>
<style scoped lang='scss'>
.edit-company-dialog-container {
  .el-select {
    width: 100%;
  }
  .company-logo-upload {
    width: 178px;
    height: 178px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    &:hover {
      border-color: #409eff;
    }
    .logo-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .logo {
      width: 178px;
      height: 178px;
      display: block;
    }
  }
  .footer-btn {
    text-align: center;
  }
}
</style>
